<!DOCTYPE html>
<html>

	<head>
		<title>我的消息</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<link rel="stylesheet" href="/js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
		<script src="/js/jquery/jquery.min.js"></script>
		<script src="/js/plugins/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="/css/font/css/font-awesome.min.css" />
		<link rel="stylesheet" href="/css/reset.css" />
		<link rel="stylesheet" href="/css/message.css" />
		<script type="text/javascript" src="/js/bootstrap/js/bootstrap.min.js"></script>
		<script src="/js/plugins/jrender/jrender.min.js"></script>
		<script src="/js/plugins/jquery-form/jquery.form.js"></script>
		<link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
		<script src="/js/plugins/dialog2/dialog.min.js"></script>
		<script>
			$(function () {
                var userStr = sessionStorage.getItem("user");
                var user = JSON.parse(userStr);
                //直接将currentPage写死,那么只会查询到第二页的数据,之前的data数据丢失,所以此处定义一个临时变量存放data的参数
                var dataList=[];
                var currentPage =1;
                var totalPage=0;
                $.get("/systemmessages/"+user.id,{userId:user.id,currentPage:currentPage,pageSize:0,state:0},function (data) {
                    $("#unread").html(data.size)
                })
                systemMsgQuery();
                function systemMsgQuery() {
                    $.get("/systemmessages/"+user.id,{userId:user.id,currentPage:currentPage,pageSize:3},function (data) {
                        $.merge(dataList,data.list)
                        console.log(data);
                        $(".systemMsg").renderValues({list:dataList})
                        currentPage +=1;
                        totalPage = data.pages;

                    })
                }
                $(window).scroll(function () {
                    if($(window).height()+$(window).scrollTop()>=$(document).height()){
                        //console.log($(window).height());console.log($(window).scrollTop());console.log($(document).height());
                        //判断当前页是否小于等于总页数
                        if(currentPage<=totalPage){
                            systemMsgQuery();
                        }
                        else{
                            $(document).dialog({
                                type : 'notice',
                                infoText: '亲.我也是有限度的',
                                autoClose: 2500,
                                position: 'bottom'  // center: 居中; bottom: 底部
                            });
                        }
                    }
                })
            })
		</script>
	</head>

	<body>
		<div class="search-head">
			<div class="row nav-search">
				<div class="col">
					<a href="/mine/profiles.html">
						<span><i class="fa fa-chevron-left" ></i></span>
					</a>
				</div>
				<div class="col">
					<span>我的消息</span>
				</div>
				<div class="col"></div>
			</div>
		</div>

		<ul class="list-group">
			<a href="/mine/likeMe.html">
				<li class="list-group-item d-flex justify-content-between align-items-center">
					<div class="item">
						<span><i class="fa fa-thumbs-o-up" ></i></span>
						<span>赞</span>
						<span class="badge badge-danger badge-pill"></span>
					</div>
					<i class="fa fa-chevron-right"></i>
				</li>
			</a>
			<a href="/mine/addme.html">
				<li class="list-group-item d-flex justify-content-between align-items-center">
					<div class="item">
						<span><i class="fa fa-at" ></i></span>
						<span>@我的</span>
						<span class="badge badge-danger badge-pill"></span>
					</div>
					<i class="fa fa-chevron-right"></i>
				</li>
			</a>
			<a href="/mine/commentmine.html">
				<li class="list-group-item d-flex justify-content-between align-items-center">
					<div class="item">
						<span><i class="fa fa-commenting-o" ></i>	</span>
						<span>评论</span>
						<span class="badge badge-danger badge-pill"></span>
					</div>
					<i class="fa fa-chevron-right"></i>
				</li>
			</a>
			<a href="/mine/personalmess.html">
				<li class="list-group-item d-flex justify-content-between align-items-center">
					<div class="item">
						<span><i class="fa fa-envelope-o" ></i></span>
						<span>	私信</span>
						<span class="badge badge-danger badge-pill"></span>
					</div>
					<i class="fa fa-chevron-right"></i>
				</li>
			</a>
			<a href="/mine/systemmessage.html" id="system">
				<li class="list-group-item d-flex justify-content-between align-items-center">
					<div class="item">
						<span><i class="fa fa-bell" ></i></span>
						<span>系统通知</span>
						<span class="badge badge-danger badge-pill" id="unread"></span>
					</div>
					<i class="fa fa-chevron-right"></i>
				</li>
			</a>
		</ul>
		
			<div class="container systemMsg">
					<dl class="itemList" render-loop="list">
						<dd>
							<p render-html="list.content"></p>
							<p>系统小秘书</p>
							<p render-html="list.createTime"></p>
						</dd>

					</dl>
				</div>

	</body>

</html>